<template>
    <div class="role-dialog">
        <el-dialog :title="'编辑“'+role.name+'”的权限'" :visible="dialogFormVisible" :show-close="false">
            <el-table
                :data="allPermissions"
                border
                height="500"
                ref="permissionsTable"
                @selection-change="changeFun"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="35">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="权限名称">
                </el-table-column>
                <el-table-column
                    prop="group_name"
                    label="权限分组"
                    :filter-method="filterGroup"
                    :filters="group">
                </el-table-column>
                <el-table-column
                    prop="description"
                    label="权限描述">
                    <div slot-scope="scope">
                        {{ scope.row.description ? scope.row.description : '暂无描述' }}
                    </div>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <div style="float: left">
                    <el-input
                        placeholder="搜索权限名称"
                        v-model="searchPermissionsDisplayName"
                        clearable>
                    </el-input>
                </div>
                <el-button @click="dialogFormVisible = false,$emit('cancel');">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'PermissionsEdit',
        props: {
            role: [Object, Boolean],

        },
        data() {
            return {
                dialogFormVisible: false,
                btnLoading: false,
                allPermissions: [],
                searchPermissionsDisplayName: '',
                multipleSelection: [],
                group: [],
                params: {
                    search: []
                },
            }
        },
        watch: {
            'role': {
                handler: function () {
                    let self = this;
                    if (!self.role) return;
                    self.dialogFormVisible = true;

                    // //获取当前角色的权限并勾选在权限表里
                    this.$nextTick(() => {
                        this.$refs.permissionsTable.clearSelection();
                        this.role.allPermissions.forEach(selectRoleId =>{
                            // console.log(selectRoleId)
                          self.allPermissions.forEach(row=>{
                            if(row.id == selectRoleId.id)self.$refs.permissionsTable.toggleRowSelection(row,true);
                          })
                        })
                    });
                },
                deep: true
            },
            'searchPermissionsDisplayName': {
                handler: function () {
                    this.searchPermissions();
                }

            }
        },
        methods: {
            changeFun(val) {
                this.multipleSelection = val;
            },
            searchPermissions() {
                let tableRow = this.$refs.permissionsTable.$el.querySelectorAll('tbody tr');
                let wrapperScrolling = this.$refs.permissionsTable.$el.getElementsByClassName('el-table__body-wrapper')[0];

                let tableRowHeight = tableRow[1].offsetHeight;
                let isjump = false;
                for (let i = 0; i < this.allPermissions.length; i++) {
                    if (this.searchPermissionsDisplayName && this.allPermissions[i].name.indexOf(this.searchPermissionsDisplayName) != -1) {
                        tableRow[i].style.backgroundColor = '#85ce61';
                        if (!isjump) {
                            wrapperScrolling.scrollTo(0, i * tableRowHeight);
                            isjump = true;
                        }
                    } else {
                        tableRow[i].style.backgroundColor = '#fff';
                    }
                }
            },
            btnOk() {
                this.btnLoading = true;

                let self = this;
                let permissionsAllow = [];
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    permissionsAllow.push(self.multipleSelection[i].name);
                }

                self.$Api.AddRolePermission({roleId: self.role.id, permissionsAllow: permissionsAllow}, (c) => {
                    if (c.code == 200) {
                        self.$notify({
                            title: c.data,
                            message: '修改权限成功',
                            type: 'success'
                        });
                        this.btnLoading = false;
                        this.dialogFormVisible = false;
                        this.$refs.permissionsTable.clearSelection()
                        this.$emit('success');
                    } else {
                        this.btnLoading = false;
                        self.$notify({
                            title: c.data,
                            message: '修改权限失败',
                            type: 'error'
                        });
                    }
                });


            },
            getPermissions() {
                let self = this;
                let params = self.params;
                params.pageSize = 10000;

                self.$Api.getPermissions({params: params}, (c) => {
                    if (c.code == 200) {
                        self.allPermissions = c.data.list.list
                        self.group = c.data.list.group
                    } else {
                        self.$notify({
                            title: c.data,
                            message: '获取数据失败',
                            type: 'error'
                        });
                    }
                })
            },
            filterGroup(value, row) {
                return row.group_name === value;
            },

        },
        mounted: function () {
            let self = this;

            self.getPermissions();

        },
        components: {}
    }
</script>
<style lang="less">
    .permissions-dialog {

    }
</style>
